<template>
  <div class="tre-card">
    <q-card inline>
      <q-card-title>
        <span slot="subtitle">Title</span>
        <q-icon slot="right" name="more_vert">
          <q-popover ref="popover">
            <q-list link class="no-border">
              <q-item @click="$refs.popover.close()">
                <q-item-main label="Remove Card" />
              </q-item>
              <q-item @click="$refs.popover.close()">
                <q-item-main label="Send Feedback" />
              </q-item>
              <q-item @click="$refs.popover.close()">
                <q-item-main label="Share" />
              </q-item>
            </q-list>
          </q-popover>
        </q-icon>
      </q-card-title>
      <q-card-separator />

    </q-card>
  </div>
</template>

<script>
import {
  QCard,
  QCardTitle,
  QCardMedia,
  QCardActions,
  QCardSeparator,
  QCardMain,
  QList,
  QItem,
  QItemMain,
  QItemSide,
  QItemTile,
  QCollapsible,
  QRating,
  QBtn,
  QParallax,
  QIcon,
  QPopover,
  QVideo
} from 'quasar'
export default {
  name: 'tre-card',
  components: {
    QCard,
    QCardTitle,
    QCardMedia,
    QCardActions,
    QCardSeparator,
    QCardMain,
    QList,
    QItem,
    QItemMain,
    QItemSide,
    QItemTile,
    QCollapsible,
    QRating,
    QBtn,
    QParallax,
    QIcon,
    QPopover,
    QVideo
  }
}
</script>

<style>
.tre-card {
  margin-left: -1px;
  border-left: 1px solid #2A4066;
  box-shadow: inset 2px 2px 2px rgba(0,0,0,.15);
  position: absolute;
  top: 51px;
  bottom: 0px;
  overflow: auto;
  text-align: center;
}
</style>
